<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script src="//cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script type="text/javascript">
    var scene = null;
    var camera = null;
    var renderer = null;

    var mesh = null;
    var id = null;

    function init() {
        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas')      //绑定数据
        });
        renderer.setClearColor(0x000000);
        scene = new THREE.Scene();      //实例化场景

        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);  //实例化相机 加入属性 并添加场景中
        camera.position.set(5, 5, 20);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);              

        mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),        //绘制立方体    加入材质  并且加入到场景中
            new THREE.MeshLambertMaterial({
                color: 0xffff00
            }));
        scene.add(mesh);                

        var light = new THREE.DirectionalLight(0xffffff);               //实例化光照   加入到场景中
        light.position.set(20, 10, 5);
        scene.add(light);

        //id = setInterval(draw, 20);  //定时执行函数
        id = requestAnimationFrame(draw);
    }

    function draw() {
        mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);     //修改缩放
        renderer.render(scene, camera);             //重绘制立方体
        id = requestAnimationFrame(draw);
    }
    
    function stop() {
        if (id !== null) {
            clearInterval(id);
            id = null;
        }
    }


</script>
</body>

</html>
<!--
    为了衡量画面切换速度，引入了每秒帧数 FPS（Frames Per Second）的概念，是指每秒画
面重绘的次数。FPS 越大，则动画效果越平滑，当 FPS 小于 20 时，一般就能明显感受到
画面的卡滞现象。
    那么 FPS 是不是越大越好呢？其实也未必。当 FPS 足够大（比如达到 60），再增加帧数
人眼也不会感受到明显的变化，反而相应地就要消耗更多资源（比如电影的胶片就需要更
长了，或是电脑刷新画面需要消耗计算资源等等）。因此，选择一个适中的 FPS 即可。
    NTSC 标准的电视 FPS 是 30，PAL 标准的电视 FPS 是 25，电影的 FPS 标准为 24。而对于
Three.js 动画而言，一般 FPS 在 30 到 60 之间都是可取的。

requestAnimationFrame 方法：
大多数时候，我们并不在意多久重绘一次，这时候就适合用 requestAnimationFrame 方法
了。它告诉浏览器在合适的时候调用指定函数，通常可能达到 60FPS。
因为 requestAnimationFrame 较为“年轻”，因而一些老的浏览器使用的是试验期的名字：
mozRequestAnimationFrame 、 webkitRequestAnimationFrame 、 msRequestAnimationFrame ，
为了支持这些浏览器，我们最好在调用之前，先判断是否定义了 requestAnimationFrame
以及上述函数：
var requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;

如何取舍问题：
setInterval 方法与 requestAnimationFrame 方法的区别较为微妙。一方面，最明显的差
别表现在 setInterval 可以手动设定 FPS，而 requestAnimationFrame 则会自动设定
FPS；但另一方面，即使是 setInterval 也不能保证按照给定的 FPS 执行，在浏览器处理
繁忙时，很可能低于设定值。当浏览器达不到设定的调用周期时， requestAnimationFrame
采用跳过某些帧的方式来表现动画，虽然会有卡滞的效果但是整体速度不会拖慢，而
setInterval 会因此使整个程序放慢运行，但是每一帧都会绘制出来；
总而言之， requestAnimationFrame 适用于对于时间较为敏感的环境（但是动画逻辑更加
复杂），而 setInterval 则可在保证程序的运算不至于导致延迟的情况下提供更加简洁的
逻辑（无需自行处理时间）

-->